<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="600px"
    @close="close"
  >
    <el-table
      v-loading="listLoading"
      :data="list"
      :element-loading-text="elementLoadingText"
    >
      <el-table-column
        label="间隔时间(天)"
        min-width="100"
        prop="intervalTime"
        show-overflow-tooltip
      />
      <el-table-column label="饲料名称" prop="feedName" show-overflow-tooltip />
      <el-table-column
        label="数量(单只鸡)"
        min-width="100"
        prop="feedPer"
        show-overflow-tooltip
      />
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.pageNo"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { API_varietyFeea } from "@/api/variety";
import { parseTime } from "@/utils/index";
export default {
  name: "VaccineTable",
  data() {
    return {
      parseTime,
      list: [],
      listLoading: true,
      layout: "total, sizes, prev, pager, next, jumper",
      total: 0,
      elementLoadingText: "正在加载...",
      queryForm: {
        pageNo: 1,
        pageSize: 10,
        batchCode: "",
      },
      timeOutID: null,
      title: "饲喂计划",
      dialogFormVisible: false,
      form: {},
    };
  },
  created() {},
  methods: {
    showEdit(row) {
      if (row) {
        this.form = Object.assign({}, row);
        this.queryForm.batchCode = this.form.batchCode;
        this.fetchData();
      }
      this.dialogFormVisible = true;
    },
    close() {
      this.dialogFormVisible = false;
    },
    save() {
      this.dialogFormVisible = false;
    },
    handleSizeChange(val) {
      this.queryForm.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.queryForm.pageNo = val;
      this.fetchData();
    },
    queryData() {
      this.queryForm.pageNo = 1;
      this.fetchData();
    },
    async fetchData() {
      this.listLoading = true;
      const { data } = await API_varietyFeea(this.queryForm);
      this.list = data.list;
      this.total = data.count;
      this.timeOutID = setTimeout(() => {
        this.listLoading = false;
      }, 300);
    },
  },
};
</script>
